import React,{Component} from "react";
import { Form, Input, Button, message, Steps  } from "antd";
import { Link, withRouter } from 'react-router-dom';
import ajax from '../ajaxMethod';
import  NodeRSA from 'node-rsa';
import config from "../config";

class PassWordT extends Component{
    constructor(props){
        super(props);
        this.state = {}
    }
    handleValidatorPassword = (rule, val, callback) =>{
        if(val){
            if(val.length < 4 || val.length > 32){
                callback("请输入4-32位字符的密码");
            }
            if(val === this.props.form.getFieldValue("nowPassWord")){
                callback("新密码不能和旧密码相同");
            }
        }
    }
    handleValidatorRePassword = (rule, val, callback) =>{
        let password = this.props.form.getFieldValue("password");
        if(val !== password){
            callback("两次输入密码需要相同");
        }
    }
    onSubmit = (e) =>{
        let _this = this,
            values = this.props.form.getFieldsValue(),
            jsenc = new NodeRSA(config.publicKey),
            username = this.props.location.search.replace(/^\?username=/, "");

        console.log("提交重置密码", username, values.password);
        e.preventDefault();
        ajax.postAjax("/interface/passwordSecond", {//提交信息。
            username: username,
            password:  jsenc.encrypt(values.password, 'base64')
        }, res=>{
            if(res.success){
                message.success("修改成功");
                _this.props.history.push({ pathname: "/login" });
            }else{
                console.error(res.description);
                message.error(res.description);
            }
        }, err=>{
            console.error(err);
        })
    }
    render(){
        const {getFieldProps, getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 8 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 8 },
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 12,
                },
                sm: {
                    span: 16,
                    offset: 8,
                },
            },
        };
        return(
        <div className="password">
            <div className="top">
                <div>
                    <Link to="/"><i className="logo"></i></Link>
                    <span className="forget">忘记密码</span>
                </div>
            </div>
            <div className="content-box">
                <div className="steps">
                    <Steps current={2}>
                        <Steps.Step title="验证" description="" />
                        <Steps.Step title="发送" description="" />
                        <Steps.Step title="设置" description="" />
                    </Steps>
                </div>
                <Form onSubmit={this.onSubmit}>
                    <Form.Item
                        {...formItemLayout}
                        label="新密码"
                    >
                        <Input.Password 
                            placeholder='请输入4-32位的密码' 
                            visibilityToggle={false} 
                            {...getFieldProps('password', {
                                rules: [
                                    {required: true, message: '请输入4-32位字符的密码' },
                                    {validator: this.handleValidatorPassword }
                                ],
                            })}/>
                    </Form.Item>
                    <Form.Item
                        {...formItemLayout}
                        label="重复密码"
                    >
                        <Input.Password 
                            placeholder='请重复输入密码' 
                            visibilityToggle={false} 
                            {...getFieldProps('rePassword', {
                                rules: [
                                    {required: true, message: '请重复输入密码' },
                                    {validator: this.handleValidatorRePassword },
                                ],
                            })}/>
                    </Form.Item>
                    <Form.Item {...tailFormItemLayout}>
                        <Button type="primary" htmlType="submit">提交</Button>
                    </Form.Item>
                </Form>
            </div>
        </div>)
    }
}

export default withRouter(Form.create({})(PassWordT));